<template>
<div>
  <div class="opt-area-02">
    <div class="left-con" style="margin-bottom: 5px">
      未备案车辆:{{params.totalRecord}}
    </div>
    <div class="left-con">
      <div class="input-frame" style="width: 164px">
        <Input type="text" placeholder="车牌号" style="width: 164px" v-model="params.BRANUM"/>
      </div>
      <Button type="primary" @click="findTableList">查询轨迹</Button>
    </div>
  </div>
  <Table border :columns="tableColumns" :data="tableData">
    <template slot-scope="{ row, index }" slot="BRACOLOR">
      <span v-for="(item,index) in projectListArr" :key="index">
        <p v-show="item.value === row.BRACOLOR "> {{item.lable}}</p>
      </span>
    </template>
    <template slot-scope="{ row, index }" slot="action">
<!--      <Button type="primary" size="small" style="margin-right: 5px">详情</Button>-->
      <Button type="warning" class="actionBtn" size="small" @click="getRealTimeLine(row)" style="margin-right: 5px">查询实时轨迹</Button>
      <Button type="warning" class="actionBtn" size="small" @click="getCarLine(row)" style="margin-right: 5px">查询历史轨迹</Button>
      <Button type="success" class="actionBtn" size="small" @click="chuzhi(row)">处置</Button>
    </template>
  </Table>
  <Row type="flex" justify="end" class="page_style">
    <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
          @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
  </Row>
  <a-map-index ref="aMap"></a-map-index>
  <a-map-real-time-index ref="realTime"></a-map-real-time-index>

  <Modal
    v-model="chuzhiShow"
    title="处置"
    @on-ok="chuzhiOk"
    @on-cancel="chuzhiShow = false">
    <Form :model="chuzhiInfo" :label-width="80">
      <FormItem label="处置内容：">
        <Input type="textarea" v-model="chuzhiInfo.jtj_cz" placeholder="请出入处置内容"></Input>
      </FormItem>
    </Form>
  </Modal>
</div>
</template>

<script>

import AMapIndex from '../a-map'
import AMapRealTimeIndex from '../a-map-real-time'
import { getUnRecordList, updateWeiBeianCz } from '../../api/eventlist'
export default {
  name: 'index',
  components: { AMapRealTimeIndex, AMapIndex },
  data () {
    return {
      projectListArr: [
        {
          value: '1',
          lable: '蓝色'
        },
        {
          value: '2',
          lable: '黄色'
        },
        {
          value: '3',
          lable: '黑色'
        },
        {
          value: '4',
          lable: '白色'
        },
        {
          value: '5',
          lable: '绿色'
        },
        {
          value: '9',
          lable: '其他'
        }
      ],
      chuzhiShow: false,
      chuzhiInfo: {},
      tableColumns: [
        {
          title: '车牌号',
          key: 'BRANUM',
          align: 'center'
        },
        {
          title: '车牌颜色',
          slot: 'BRACOLOR',
          align: 'center'
        },
        {
          title: '入锦时间',
          key: 'on_time',
          align: 'center'
        },
        {
          title: '操作',
          width: 390,
          slot: 'action',
          align: 'center'
        }
      ],
      tableData: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        BRANUM: ''
      }
    }
  },
  methods: {
    pageAction (page) {
      this.params.pageNo = page
      this.findTableList()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.findTableList(this.params.pageNo)
    },
    findTableList () {
      let data = this.params
      getUnRecordList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.params.totalRecord = data.data.totalRecord
        } else {
          this.error(data)
        }
      })
    },
    getCarLine (e) {
      console.log(e)
      let data = {
        car_number: e.BRANUM,
        chepai_color: e.BRACOLOR
      }
      this.$refs.aMap.init(data)
    },
    getRealTimeLine (e) {
      console.log('123', e)
      this.$refs.realTime.init(e)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    chuzhi (item) {
      this.chuzhiInfo.jtj_cz = ''
      this.chuzhiShow = true
      this.chuzhiInfo = item
    },
    chuzhiOk () {
      if (!this.chuzhiInfo.jtj_cz) {
        this.$Message.error({
          content: '请填写处置内容'
        })
        return
      }
      let param = {
        id: this.chuzhiInfo.id,
        jtj_cz: this.chuzhiInfo.jtj_cz
      }
      updateWeiBeianCz(param).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('处置成功')
          this.chuzhiShow = false
          this.findTableList()
        } else {
          this.$Message.error({
            content: '操作失败,\n' + res.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.findTableList()
  }
}
</script>

<style scoped>
.page_style{
  margin-top: 10px;
}
.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}
.demo-spin-container{
  display: inline-block;
  width: 100%;
  /*//height: 400px;*/
  position: relative;
  /*//border: 1px solid #eee;*/
}
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}
</style>
